<template>
  <div>
    <!-- 搜索框 -->
    <van-search v-model="value" placeholder="请输入目的地国家" />
    <!-- 地图部分 -->
    <div class="map">
      <div class="ouzhou" @click="btnclick" name="欧洲">
        <span class="miao">欧洲</span>
      </div>
      <div class="yazhou" @click="btnclick" value="亚洲">
        <span class="miao">亚洲</span>
      </div>
      <div class="beimei" @click="btnclick" value="北美洲">
        <span class="miao">北美洲</span>
      </div>
      <div class="nanmei" @click="btnclick" value="南美洲">
        <span class="miao">南美洲</span>
      </div>
      <div class="dayangzhou" @click="btnclick" value="大洋洲">
        <span class="miao">大洋洲</span>
      </div>
      <div class="feizhou" @click="btnclick" value="非洲">
        <span class="miao">非洲</span>
      </div>
    </div>
    <!-- 热门目的地 -->
    <div class="hot_des">
      <div class="hot">{{ this.country }}热门目的地</div>
      <div class="hot_des_title">
        <ul class="list">
          <li
            v-for="item in hot_cou_list"
            :key="item.country"
            @click="cities(item.country)"
          >
            <img :src="item.country_pic_url" alt="" />
            <div class="ico">
              <span>{{ item.country }}</span>
              &emsp;<span>{{ item.country_en }}</span>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 其他目的地 -->
    <div class="oth_des">
      <div class="oth">
        <p>{{ this.country }}其他目的地</p>
        <span>拼音字母排序</span>
      </div>
      <ul>
        <li
          v-for="item in oth_cou_list"
          :key="item.country"
          @click="othCity(item.country)"
        >
          <p>
            {{ item.country }}<span>{{ item.country_en }}</span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// 引入vant
import Vue from "vue";
import { Search } from "vant";

Vue.use(Search);
export default {
  data() {
    return {
      value: "",
      //   定义一个变量用于存储数据
      hot_cou_list: [],
      oth_cou_list: [],
      //   定义变量存储国家
      country: "欧洲",
      index: 0,
      country_zh: ["欧洲", "亚洲", "非洲", "大洋洲", "北美洲", "南美洲"],
      continents_en: [
        "Europe",
        "Asia",
        "Africa",
        "Oceania",
        "NorthAmerica",
        "SouthAmerica",
      ],
    };
  },
  methods: {
    btnclick(ev) {
      //   获取点击操作dom的子元素的文本内容
      this.country = ev.target.innerText;
      this.index = this.country_zh.indexOf(this.country);

      this.onLoad();
    },
    onLoad() {
      this.$http
        .get(
          "http://www.51houniao.com/product/desc/CountryList/" +
            this.country +
            "/" +
            this.continents_en[this.index]
        )
        .then((ret) => {
          this.hot_cou_list = ret.hot_country_list;
          this.oth_cou_list = ret.other_country_list;
        });
    },

    // 城市的详细信息
    cities(hotCity) {
      // 将点击城市对应的下标存入本地存储
      localStorage.setItem("hotCity", hotCity);
      localStorage.setItem("othCity", "");
      localStorage.setItem("hotCityIn", JSON.stringify(this.hot_cou_list));
      localStorage.setItem("othCityIn", "");
      this.$router.push("/desCountry");
    },
    othCity(othCity) {
      localStorage.setItem("othCity", othCity);
      localStorage.setItem("hotCity", "");
      localStorage.setItem("othCityIn", JSON.stringify(this.oth_cou_list));
      localStorage.setItem("hotCityIn", "");
      this.$router.push("/desCountry");
    },
  },
  created() {
    this.$http
      .get("http://www.51houniao.com/product/desc/CountryList/欧洲/Europe")
      .then((ret) => {
        this.hot_cou_list = ret.hot_country_list;
        this.oth_cou_list = ret.other_country_list;
      });
  },

};
</script>

<style scoped>
body {
  margin-bottom: 50px;
}
.van-search {
  padding: 43px 14px;
}
.van-search__content {
  border-radius: 20px;
  margin-top: 30px;
}
.map {
  width: 100%;
  height: 220px;
  position: relative;
  padding: 12px 9px;
  box-sizing: border-box;
  border-bottom: 10px solid #bdc2c3;
}
.ouzhou {
  width: 187px;
  height: 103px;
  background: url(../../assets/img/ouzhou.png) 0px -108px no-repeat;
  position: absolute;
  top: -1px;
  left: 17px;
  background-size: 187px;
}
.miao {
  display: block;
}
.ouzhou span {
  margin: 50px 60px 0;
}
.dayangzhou {
  width: 56px;
  height: 47px;
  background: url(../../assets/img/dayangzhou.png) 0 -56px no-repeat;
  position: absolute;
  background-size: 56px;
  top: 143px;
  left: 131px;
}

.dayangzhou span {
  font-size: 16px;
}
.beimei {
  width: 152px;
  height: 124px;
  background: url(../../assets/img/beimei.png) 0 -126px no-repeat;
  position: absolute;
  right: 17px;
  top: -9px;
  background-size: 152px;
}
.beimei span {
  margin: 60px;
}
.nanmei {
  width: 82px;
  height: 114px;
  background: url(../../assets/img/nanmei.png) 0 -117px no-repeat;
  position: absolute;
  top: 98px;
  right: 32px;
  background-size: 82px;
}
.nanmei span {
  margin: 45px;
}
.feizhou {
  width: 76px;
  height: 82px;
  background: url(../../assets/img/feizhou.png) 0 -80px no-repeat;
  position: absolute;
  left: 7px;
  top: 77px;
  background-size: 76px;
}
.feizhou span {
  margin: 30px;
}
.yazhou {
  width: 93px;
  height: 79px;
  background: url(../../assets/img/yazhou.png) 0px -80px no-repeat;
  position: absolute;
  top: 58px;
  left: 81px;
  background-size: 93px;
}
.yazhou span {
  margin: 30px;
}
.hot {
  padding: 12px 0;
}
.hot_des,
.oth_des {
  padding: 0 12px;
  width: 351px;
}
.list {
  width: 351px;
  overflow: hidden;
  display: flex;
  /* float: left; */
  justify-content: space-between;
  flex-wrap: wrap;
}
.list li {
  width: 168px;
  position: relative;
  height: 104px;

  /* margin-bottom: 14px; */
}
.list li img {
  width: 100%;
  display: block;
}
.list li .ico {
  position: absolute;
  bottom: 15px;
  left: 5px;
  color: #fff;
}
/* 其他目的地 */
.oth_des ul li {
  color: #868686;
  border-bottom: 1px dashed #a4a5a5;
}
.oth span {
  float: right;
  line-height: 60px;
}
.oth p {
  display: inline-block;
  font-size: 18px;
  color: #445356;
}
</style>